<template>
  <div :class="{'carousel-components': true, 'carousel-inline': inline}">
    <a-carousel :ref="carouselName" :dots="false" arrows dotsClass="slick-dots slick-thumb" :beforeChange="beforeChange">
      <div class="carousel-image-contain" v-for="(item, i) in imageList" :key="item + i">
        <div class="cursor-model-contain" :id="'item_' + i" @mouseenter="(e) => enterMove(e, i)" @mouseleave="leaveEnd"></div>
        <div class="cursor-model" :id="'model_' + i"></div>
        <img :src="item" />
      </div>
    </a-carousel>
    <div class="show-image" v-if="!!nowImageUrl">
      <img :src="nowImageUrl" id="large-carousel-image" />
    </div>
    <div class="bottom-carousel">
      <div class="left-arrow arrow" @click="arrowChange(-1)">
        <a-icon type="left" style="font-size: 20px; color: #CCC;" />
      </div>
      <div class="bottom-image">
        <ul :style="{left: -left + 'px'}">
          <li v-for="(item, i) in imageList" :key="item + i" :class="{'is-active': current === i}" @click="toThisImage(i)">
            <img :src="item" />
          </li>
        </ul>
      </div>
      <div class="right-arrow arrow" @click="arrowChange(1)">
        <a-icon type="right" style="font-size: 20px; color: #CCC;" />
      </div>
    </div>
  </div>
</template>

<script>
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/'
export default {
  data() {
    return {
      baseUrl,
      current: '',
      left: 0,
      nowImageUrl: ''
    }
  },
  methods: {
    enterMove(e, i) {
      // 鼠标按下并移动的事件
      document.getElementById('item_' + i).onmousemove = (e) => {
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const offsetX = e.offsetX;
        const offsetY = e.offsetY;
        let left = 0, top = 0;
        if (offsetX > 90 && offsetX < 270) {
          left = offsetX - 90;
        } else if (offsetX >= 270) {
          left = 180;
        }

        if (offsetY > 90 && offsetY < 270) {
          top = offsetY - 90;
        } else if (offsetY >= 270) {
          top = 180;
        }
        document.getElementById('model_' + i).style.cssText = `left: ${left}px; top: ${top}px;`;
        document.getElementById('large-carousel-image').style.cssText = `left: ${-left * 2}px; top: ${-top * 2}px;`;
      };
      this.nowImageUrl = this.imageList[i];
    },
    leaveEnd() {
      this.nowImageUrl = '';
    },
    beforeChange(from, to) {
      this.current = to;
      let imageList = this.imageList;
      console.log(to);
      if (to === 0 || to === 1) this.left = 0;
      if (imageList.length - to - 1 > 1 && to > 1) {
        this.left = (to - 1) * 80;
      }
    },
    toThisImage(i) {
      this.$refs[this.carouselName].goTo(i);
    },
    arrowChange(a) {
      let current = this.current;
      let l = this.imageList.length;
      if (a > 0 && current === l - 1) {
        this.toThisImage(0);
      } else if (a < 0 && current === 0) {
        this.toThisImage(l - 1);
      } else {
        this.toThisImage(current + a);
      }
    }
  },
  props: {
    inline: {
      type: Boolean,
      default: true
    },
    carouselName: {
      type: String,
      default: 'carousel'
    },
    imageList: {
      type: Array,
      default() {
        return [
          baseUrl + 'abstract01.jpg',
          baseUrl + 'abstract02.jpg',
          baseUrl + 'abstract03.jpg',
          baseUrl + 'abstract04.jpg',
          baseUrl + 'abstract01.jpg',
          baseUrl + 'abstract02.jpg',
          baseUrl + 'abstract03.jpg',
          baseUrl + 'abstract04.jpg'
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.carousel-components {
  width: 360px;
  position: relative;
  height: 448px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .show-image {
    width: 360px;
    height: 360px;
    overflow: hidden;
    position: absolute;
    left: 363px;
    top: 0;
    z-index: 100;

    img {
      width: 720px;
      height: 720px;
      position: relative;
    }
  }

  &.carousel-inline {
    display: inline-block;
    margin: 0;
  }

  .carousel-image-contain {
    position: relative;

    .cursor-model-contain {
      position: absolute;
      top: 0;
      left: 0;
      width: 360px;
      height: 360px;
      z-index: 100;
    }

    .cursor-model {
      position: absolute;
      width: 180px;
      height: 180px;
      z-index: 99;
      background: rgba(0, 0, 0, 0.4);
      display: none;
    }

    &:hover {
      .cursor-model {
        display: block;
      }
    }
  }

  .ant-carousel {
    /deep/ .slick-dots {
      height: auto;
    }

    /deep/ .slick-slide img {
      display: block;
      width: 360px;
      height: 360px;
      margin: auto;
    }
  }

  .bottom-carousel {
    width: 360px;
    height: 64px;
    margin-top: 24px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    .arrow {
      width: 20px;
      cursor: pointer;
      line-height: 64px;
    }

    .bottom-image {
      width: 304px;
      overflow: hidden;

      ul {
        position: relative;
        display: flex;
        margin: 0;
        padding: 0;
        left: 0;
        transition: left 0.5s;
        -moz-transition: left 0.5s;
        -webkit-transition: left 0.5s;
        -o-transition: left 0.5s;

        li {
          display: inline-block;
          list-style: none;
          width: 64px;
          height: 64px;
          margin-right: 16px;
          border: 1px solid @greyBorder;

          &:nth-last-child(1) {
            margin-right: 0;
          }

          &.is-active {
            border-color: red;
          }

          img {
            width: 62px;
            height: 62px;
          }
        }
      }
    }
  }
}
</style>
